<template>
<ul>
    <li v-for="(item,index) in list" :class="{'active':currId==item.id}" @click="setFocus(item)" :key="index">{{item.alias}}</li>
</ul>
</template>
<script>
    import fixer from "@/api/fixer/index";
    export default {
        name:"FixerList",
        props:[],
        data() {
            return {
                list:[],
                currId:""
            };
        },
        created() {
            this.getList()
        },
        methods: {
            getId(){
              return this.currId
            },
            setFocus(row){
                if(this.currId != row.id){
                    this.currId=row.id
                    this.$emit("getData",row.id);
                }
            },
            getList() {
                fixer.getList().then(res=>{
                    this.list = res.data;
                    if(this.list.length>0){
                        this.setFocus(this.list[this.getCurrIndex(this.$route.query.id)])
                    }
                })
            },
            getCurrIndex(id){
                var index = 0;
                if(id){
                    for(var i=0; i<this.list.length; i++){
                        if(this.list[i].id == this.currId){
                            return i
                        }
                    }
                }
                return index
            }
        }
    };
</script>
<style lang="scss" scoped>
    @import '~@/styles/element-variables.scss';
    li{
        cursor: pointer;
        padding: 0px 20px;
        font-size: 14px;
    }
    li:hover{
        background-color: #f5f7fa;
    }
    .active{
        background-color: #ebebfd;
        color: $--color-primary
    }
</style>
